<!--用户列表-->
<template>
  <div class="userList_box">
    <!--    查询模块-->
    <div class="search_box">
      <el-form
        ref="searchDate"
        :inline="true"
        :model="searchDate"
        class="demo-form-inline"
      >
        <el-form-item label="关键词：" prop="keyword">
          <el-input
            v-model="searchDate.keyword"
            placeholder="请输入关键词"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户ID：" prop="userId">
          <el-input
            v-model="searchDate.userId"
            placeholder="请输入用户ID"
          ></el-input>
        </el-form-item>
        <el-form-item label="销售：" prop="market">
          <el-select v-model="searchDate.market" placeholder="请选择销售">
            <el-option label="系统默认销售" value="系统默认销售"></el-option>
            <el-option label="销售主管" value="销售主管"></el-option>
            <el-option label="销售L" value="销售L"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="searchDate.status">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="可用" value="可用"></el-option>
            <el-option label="不可用" value="不可用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--    操作按钮模块-->
    <div class="operation_box">
      <el-button type="success">导入</el-button>
      <el-button type="primary">合开用户</el-button>
      <el-button type="primary">转移用户</el-button>
      <el-button type="warning" @click="openDialog">新增电话用户</el-button>
    </div>
    <!--    表格-->
    <div class="table_box">
      <el-table
        :data="showData"
        :header-cell-style="{
          background: 'rgba(227,189,189,0.53)',
          border: 'none',
          color: '#000',
        }"
        border
        style="width: 100%"
      >
        <el-table-column label="ID" prop="userId" width="80"> </el-table-column>
        <el-table-column label="微信名称" prop="wxName" width="100">
        </el-table-column>
        <el-table-column label="备注" prop="remark" width="90">
        </el-table-column>
        <el-table-column label="微信头像" width="100">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.wxProfile"
              :src="scope.row.wxProfile"
              class="product_img"
              fit="fill"
              lazy
            ></el-image>
            <span v-else>——</span>
          </template>
        </el-table-column>
        <el-table-column label="剩余水票" prop="residueWaterCoupon" width="100">
        </el-table-column>
        <el-table-column label="额度(可/已使用额度)">
          <template slot-scope="scope">
            <div style="display: flex; justify-content: space-around">
              <div class="red_text">
                {{
                  scope.row.amount.available !== 0 ||
                  scope.row.amount.used !== 0
                    ? scope.row.amount.available !== 0 &&
                      scope.row.amount.used !== 0
                      ? (scope.row.amount.available / scope.row.amount.used) *
                        100
                      : scope.row.amount.available === 0 &&
                        scope.row.amount.used !== 0
                      ? 100
                      : 0
                    : 0
                }}%
              </div>
              <div>
                (<span class="orange_text">{{
                  scope.row.amount.available
                }}</span
                >/{{ scope.row.amount.used }})
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="历史充值(元)" prop="historyPay" sortable>
        </el-table-column>
        <el-table-column label="已付押金/手上桶数" prop="purchased">
          <template slot-scope="scope">
            <span
              >{{ scope.row.purchased.deposit }}/{{
                scope.row.purchased.barrelage
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="已/未付押金桶" prop="barrel" sortable>
          <template slot-scope="scope">
            <span>
              {{
                scope.row.barrel.prepaid !== 0 || scope.row.barrel.unpaid !== 0
                  ? scope.row.barrel.prepaid !== 0 &&
                    scope.row.barrel.unpaid !== 0
                    ? (scope.row.barrel.prepaid / scope.row.barrel.unpaid) * 100
                    : scope.row.barrel.prepaid === 0 &&
                      scope.row.barrel.unpaid !== 0
                    ? 100
                    : 0
                  : 0
              }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column label="所属销售" prop="market"> </el-table-column>
        <el-table-column
          label="修改时间"
          prop="updateTime"
          sortable
          width="160"
        >
        </el-table-column>
        <el-table-column label="状态" width="110">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
            <span
              :class="scope.row.status ? 'green_text' : 'red_text'"
              class="operation_btn"
              >{{ scope.row.status ? "启用" : "未启用" }}</span
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="230">
          <template>
            <div>
              <span class="blue_text operation_btn">备注</span>
              <span class="blue_text operation_btn">详情</span>
              <span class="blue_text operation_btn">绑定下级</span>
              <span class="blue_text operation_btn">解绑下级</span>
            </div>
            <div>
              <span class="red_text operation_btn">替换销售</span>
              <span class="blue_text operation_btn">用户商品</span>
              <span class="blue_text operation_btn">收货地址</span>
            </div>
            <div>
              <span class="blue_text operation_btn">商品日志</span>
              <span class="blue_text operation_btn">用户订单</span>
              <span class="blue_text operation_btn">预约单</span>
            </div>
            <div>
              <span class="blue_text operation_btn">退货单</span>
              <span class="blue_text operation_btn">变更单</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页-->
    <div class="list_bottom">
      <div class="list_length">
        共<span>{{ total }}</span
        >条
      </div>
      <el-pagination
        :current-page="currentPage"
        :page-count="10"
        :page-size="pageSize"
        :page-sizes="[5, 15, 50, 100]"
        :total="total"
        background
        layout=" prev, pager, next,sizes,jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!--      编辑弹窗-->
    <Dialog ref="dialog" @addList="addList"></Dialog>
  </div>
</template>
<script>
import { userList } from "@/data/tableList";
import Dialog from "./dialog";

export default {
  data() {
    return {
      // 查询表单
      searchDate: {
        keyword: "",
        userId: "",
        market: "",
        status: "全部",
      },
      showData: [], // 显示数据
      total: 0, // 列表总数
      currentPage: 1, // 当前页数
      pageSize: 5, // 没意思的数据个数
    };
  },
  components: { Dialog },
  created() {},
  mounted() {
    this.showTable();
  },
  methods: {
    // 数据切片分页渲染表格
    showTable() {
      // 加载表格数据,模拟请求到数据
      this.total = userList.length;
      this.showData = userList.slice(
        this.pageSize * (this.currentPage - 1),
        this.pageSize * this.currentPage
      );
    },
    //pageSize 改变时触发
    handleSizeChange(val) {
      // .slice((currentPage-1)*pageSize,currentPage*pageSize)
      this.pageSize = val;
      this.showTable();
    },
    // currentPage 改变时会触发的函数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.showTable();
    },
    // 查询
    onSubmit() {
      this.$message({
        message:
          "关键字：" +
          this.searchDate.keyword +
          "用户ID:" +
          this.searchDate.userId +
          "销售：" +
          this.searchDate.market +
          "状态" +
          this.searchDate.status,
        type: "success",
      });
    },

    // 重置查询表单
    resetForm() {
      this.$refs.searchDate.resetFields();
    },

    // 拉起编辑弹窗
    openDialog() {
      // 调用子组件的开启
      this.$refs.dialog.showDialog();
    },

    // 新增数据
    addList(list) {
      // 新增id
      userList.push(JSON.parse(list));
      this.showTable();
    },
  },
};
</script>
<style scoped>
.table_box {
  margin-top: 20px;
}

.product_img {
  margin-top: 7px;
  width: 40px;
  height: 40px;
}

/*解决element表格固定列的下边框*/
/deep/ .el-table__fixed-right::before,
/deep/ .el-table__fixed::before {
  height: 0 !important;
  z-index: 0 !important;
}
</style>
